<!doctype html>
<html><head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<style type='text/css'>
		html { font-family:Helvetica; color:#222; }
		h1 { color:steelblue; font-size:24px; margin-top:24px; }
		button { margin:0 3px 10px; font-size:12px; }
		.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
	</style>
</head><body>
	<h1>WebViewJavascriptBridge Demo</h1>
	<script>
    function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    }
    let func1 = function(){
        var a = 10;
    };
    let person = {};
       person.name = "hou";
       person.height = 180;
       person.loc = {"key":"value"};
       
       console.log(NaN)
       console.log(undefined)
       console.log(null)
       console.log(333333)
       console.log(person);
       console.log(func1);
      
    setupWebViewJavascriptBridge(function(bridge) {
		var uniqueId = 1
		function log(message, data) {
			var log = document.getElementById('log')
			var el = document.createElement('div')
			el.className = 'logLine'
			el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
			if (log.children.length) { log.insertBefore(el, log.children[0]) }
			else { log.appendChild(el) }
		}

		bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
			log('ObjC called testJavascriptHandler with', data)
			var responseData = { 'Javascript Says':'Right back atcha!' }
			log('JS responding with', responseData)
			responseCallback(responseData)
		})
        bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
            log('JS got response', response)
        })
		document.body.appendChild(document.createElement('br'))
    })
    
    function onclickBtn() {
        setupWebViewJavascriptBridge(function(bridge) {
                                     var uniqueId = 1
                                     function log(message, data) {
                                     var log = document.getElementById('log')
                                     var el = document.createElement('div')
                                     el.className = 'logLine'
                                     el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
                                     if (log.children.length) { log.insertBefore(el, log.children[0]) }
                                     else { log.appendChild(el) }
                                     }
                                     bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                                                        log('JS got response', response)
                                                        })
                                     document.body.appendChild(document.createElement('br'))
                                     })
    }
	</script>
	<button id='buttons' onclick="onclickBtn()" style="width: 200px;height: 40px">Fire testObjcCallback</button> <div id='log'></div>
</body></html>
